<template>
  <div id="add">

    <footer>
        <van-tabbar active-color="#45b5ed" inactive-color="#5D616A"  v-model="sactive"><van-tabbar-item :icon="active ? icon.active :icon.inactive" to="/home">
        首页</van-tabbar-item>
           <van-tabbar-item :icon="active !==1 ? shop.active :shop.inactive"  to="/shop"> 购物车</van-tabbar-item>
            <van-tabbar-item :icon="active !== 2 ? my.active :my.inactive" to="/my">我的</van-tabbar-item>
        </van-tabbar>
    </footer>

        <!-- <footer>
            <van-tabbar v-model="active">
            <van-tabbar-item badge="3">
                <span>自定义</span>
                <template #icon="props">
                <img :src="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="search">标签</van-tabbar-item>
            <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
            </van-tabbar>
        </footer> -->
  </div>
  
</template>

<script>

export default {
   data() {
        return {
        sactive: this.active,
        icon: {
            active: require('../assets/Icon/底部主导航图标48px/首页.svg'),
            inactive: require('../assets/Icon/底部主导航图标48px/首页-选中.svg'),
        },
        shop: {
            active: require('../assets/Icon/底部主导航图标48px/购物车.svg'),
            inactive: require('../assets/Icon/底部主导航图标48px/购物车-选中.svg'),
        },
        my: {
            active: require('../assets/Icon/底部主导航图标48px/我的.svg'),
            inactive: require('../assets/Icon/底部主导航图标48px/我的-选中.svg'),
        },
        };
    },
  methods:{
    
  }, props:{
       active:{
           default:0,
           type:Number
       }
   }
}
</script>

<style lang="less">
#app{
    footer div{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
</style>